<!DOCTYPE html>
<html>
    
<!-- Mirrored from coderthemes.com/zircos_2/default/ui-images.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Sep 2017 08:58:47 GMT -->
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">
        <!-- App title -->
        <title>Zircos - Responsive Admin Dashboard Template</title>

        <!-- App css -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/core.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/components.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="http://coderthemes.com/zircos_2/plugins/switchery/switchery.min.css">

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <script src="assets/js/modernizr.min.js"></script>
<script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','https://coderthemes.com//www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-83057131-1', 'auto');
          ga('send', 'pageview');

        </script>

    </head>


    <body class="fixed-left">

        <!-- Begin page -->
        <div id="wrapper">

            <!-- Top Bar Start -->
            <div class="topbar">

                <!-- LOGO -->
                <div class="topbar-left">
                    <a href="index.html" class="logo"><span>Zir<span>cos</span></span><i class="mdi mdi-layers"></i></a>
                    <!-- Image logo -->
                    <!--<a href="index.html" class="logo">-->
                        <!--<span>-->
                            <!--<img src="assets/images/logo.png" alt="" height="30">-->
                        <!--</span>-->
                        <!--<i>-->
                            <!--<img src="assets/images/logo_sm.png" alt="" height="28">-->
                        <!--</i>-->
                    <!--</a>-->
                </div>

                <!-- Button mobile view to collapse sidebar menu -->
                <div class="navbar navbar-default" role="navigation">
                    <div class="container">

                        <!-- Navbar-left -->
                        <ul class="nav navbar-nav navbar-left">
                            <li>
                                <button class="button-menu-mobile open-left waves-effect">
                                    <i class="mdi mdi-menu"></i>
                                </button>
                            </li>
                            <li class="hidden-xs">
                                <form role="search" class="app-search">
                                    <input type="text" placeholder="Search..."
                                           class="form-control">
                                    <a href="#"><i class="fa fa-search"></i></a>
                                </form>
                            </li>
                            <li class="hidden-xs">
                                <a href="#" class="menu-item">New</a>
                            </li>
                            <li class="dropdown hidden-xs">
                                <a data-toggle="dropdown" class="dropdown-toggle menu-item" href="#" aria-expanded="false">English
                                    <span class="caret"></span></a>
                                <ul role="menu" class="dropdown-menu">
                                    <li><a href="#">German</a></li>
                                    <li><a href="#">French</a></li>
                                    <li><a href="#">Italian</a></li>
                                    <li><a href="#">Spanish</a></li>
                                </ul>
                            </li>
                        </ul>

                        <!-- Right(Notification) -->
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="#" class="right-menu-item dropdown-toggle" data-toggle="dropdown">
                                    <i class="mdi mdi-bell"></i>
                                    <span class="badge up bg-success">4</span>
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right arrow-dropdown-menu arrow-menu-right dropdown-lg user-list notify-list">
                                    <li>
                                        <h5>Notifications</h5>
                                    </li>
                                    <li>
                                        <a href="#" class="user-list-item">
                                            <div class="icon bg-info">
                                                <i class="mdi mdi-account"></i>
                                            </div>
                                            <div class="user-desc">
                                                <span class="name">New Signup</span>
                                                <span class="time">5 hours ago</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="user-list-item">
                                            <div class="icon bg-danger">
                                                <i class="mdi mdi-comment"></i>
                                            </div>
                                            <div class="user-desc">
                                                <span class="name">New Message received</span>
                                                <span class="time">1 day ago</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="user-list-item">
                                            <div class="icon bg-warning">
                                                <i class="mdi mdi-settings"></i>
                                            </div>
                                            <div class="user-desc">
                                                <span class="name">Settings</span>
                                                <span class="time">1 day ago</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="all-msgs text-center">
                                        <p class="m-0"><a href="#">See all Notification</a></p>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a href="#" class="right-menu-item dropdown-toggle" data-toggle="dropdown">
                                    <i class="mdi mdi-email"></i>
                                    <span class="badge up bg-danger">8</span>
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right arrow-dropdown-menu arrow-menu-right dropdown-lg user-list notify-list">
                                    <li>
                                        <h5>Messages</h5>
                                    </li>
                                    <li>
                                        <a href="#" class="user-list-item">
                                            <div class="avatar">
                                                <img src="assets/images/users/avatar-2.jpg" alt="">
                                            </div>
                                            <div class="user-desc">
                                                <span class="name">Patricia Beach</span>
                                                <span class="desc">There are new settings available</span>
                                                <span class="time">2 hours ago</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="user-list-item">
                                            <div class="avatar">
                                                <img src="assets/images/users/avatar-3.jpg" alt="">
                                            </div>
                                            <div class="user-desc">
                                                <span class="name">Connie Lucas</span>
                                                <span class="desc">There are new settings available</span>
                                                <span class="time">2 hours ago</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="user-list-item">
                                            <div class="avatar">
                                                <img src="assets/images/users/avatar-4.jpg" alt="">
                                            </div>
                                            <div class="user-desc">
                                                <span class="name">Margaret Becker</span>
                                                <span class="desc">There are new settings available</span>
                                                <span class="time">2 hours ago</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="all-msgs text-center">
                                        <p class="m-0"><a href="#">See all Messages</a></p>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a href="javascript:void(0);" class="right-bar-toggle right-menu-item">
                                    <i class="mdi mdi-settings"></i>
                                </a>
                            </li>

                            <li class="dropdown user-box">
                                <a href="#" class="dropdown-toggle waves-effect user-link" data-toggle="dropdown" aria-expanded="true">
                                    <img src="assets/images/users/avatar-1.jpg" alt="user-img" class="img-circle user-img">
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right arrow-dropdown-menu arrow-menu-right user-list notify-list">
                                    <li>
                                        <h5>Hi, John</h5>
                                    </li>
                                    <li><a href="javascript:void(0)"><i class="ti-user m-r-5"></i> Profile</a></li>
                                    <li><a href="javascript:void(0)"><i class="ti-settings m-r-5"></i> Settings</a></li>
                                    <li><a href="javascript:void(0)"><i class="ti-lock m-r-5"></i> Lock screen</a></li>
                                    <li><a href="javascript:void(0)"><i class="ti-power-off m-r-5"></i> Logout</a></li>
                                </ul>
                            </li>

                        </ul> <!-- end navbar-right -->

                    </div><!-- end container -->
                </div><!-- end navbar -->
            </div>
            <!-- Top Bar End -->


            <!-- ========== Left Sidebar Start ========== -->
            <div class="left side-menu">
                <div class="sidebar-inner slimscrollleft">

                    <!--- Sidemenu -->
                    <div id="sidebar-menu">
                        <ul>
                        	<li class="menu-title">Navigation</li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-view-dashboard"></i><span class="label label-success pull-right">2</span> <span> Dashboard </span> </a>
                                <ul class="list-unstyled">
                                    <li><a href="index.html">Dashboard 1</a></li>
                                    <li><a href="dashboard_2.html">Dashboard 2</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-invert-colors"></i> <span> User Interface </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="ui-buttons.html">Buttons</a></li>
                                    <li><a href="ui-typography.html">Typography</a></li>
                                    <li><a href="ui-panels.html">Panel</a></li>
                                    <li><a href="ui-portlets.html">Portlets</a></li>
                                    <li><a href="ui-modals.html">Modals</a></li>
                                    <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
                                    <li><a href="ui-tabs.html">Tabs</a></li>
                                    <li><a href="ui-progressbars.html">Progress Bars</a></li>
                                    <li><a href="ui-notifications.html">Notification</a></li>
                                    <li><a href="ui-alerts.html">Alerts</a>
                                    <li><a href="ui-carousel.html">Carousel</a>
                                    <li><a href="ui-video.html">Video</a>
                                    <li><a href="ui-tooltips-popovers.html">Tooltips & Popovers</a></li>
                                    <li><a href="ui-images.html">Images</a></li>
                                    <li><a href="ui-bootstrap.html">Bootstrap UI</a></li>
                                    <li><a href="ui-grid.html">Grid</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-layers"></i><span> Admin UI </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="admin-sweet-alert.html">Sweet Alert</a></li>
                                    <li><a href="admin-widgets.html">Widgets</a></li>
                                    <li><a href="admin-nestable.html">Nestable List</a></li>
                                    <li><a href="admin-rangeslider.html">Range Slider</a></li>
                                    <li><a href="admin-ratings.html">Ratings</a></li>
                                    <li><a href="admin-animation.html">Animation</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="calendar.html" class="waves-effect"><i class="mdi mdi-calendar"></i><span> Calendar </span></a>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-email"></i><span> Email </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="email-inbox.html"> Inbox</a></li>
                                    <li><a href="email-read.html"> Read Mail</a></li>
                                    <li><a href="email-compose.html"> Compose Mail</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-heart-outline"></i><span> Icons </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="icons-glyphicons.html">Glyphicons</a></li>
                                    <li><a href="icons-colored.html">Colored Icons</a></li>
                                    <li><a href="icons-materialdesign.html">Material Design</a></li>
                                    <li><a href="icons-ionicons.html">Ion Icons</a></li>
                                    <li><a href="icons-fontawesome.html">Font awesome</a></li>
                                    <li><a href="icons-themifyicon.html">Themify Icons</a></li>
                                    <li><a href="icons-typicons.html">Typicons</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-diamond"></i><span class="label label-info pull-right">New</span> <span> Forms </span></a>
                                <ul class="list-unstyled">
                                    <li><a href="form-elements.html">Form Elements</a></li>
                                    <li><a href="form-advanced.html">Form Advanced</a></li>
                                    <li><a href="form-validation.html">Form Validation</a></li>
                                    <li><a href="form-pickers.html">Form Pickers</a></li>
                                    <li><a href="form-wizard.html">Form Wizard</a></li>
                                    <li><a href="form-mask.html">Form Masks</a></li>
                                    <li><a href="form-summernote.html">Summernote</a></li>
                                    <li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
                                    <li><a href="form-uploads.html">Multiple File Upload</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-format-list-bulleted"></i> <span> Tables </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                	<li><a href="tables-basic.html">Basic Tables</a></li>
                                    <li><a href="tables-layouts.html">Tables Layouts</a></li>
                                    <li><a href="tables-datatable.html">Data Table</a></li>
                                    <li><a href="tables-responsive.html">Responsive Table</a></li>
                                    <li><a href="tables-tablesaw.html">Tablesaw Table</a></li>
                                    <li><a href="tables-editable.html">Editable Table</a></li>
                                </ul>
                            </li>

                            <li class="menu-title">Extra</li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-chart-arc"></i><span> Charts </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="chart-flot.html">Flot Chart</a></li>
                                    <li><a href="chart-morris.html">Morris Chart</a></li>
                                    <li><a href="chart-google.html">Google Chart</a></li>
                                    <li><a href="chart-chartist.html">Chartist Charts</a></li>
                                    <li><a href="chart-chartjs.html">Chartjs Chart</a></li>
                                    <li><a href="chart-c3.html">C3 Chart</a></li>
                                    <li><a href="chart-sparkline.html">Sparkline Chart</a></li>
                                    <li><a href="chart-knob.html">Jquery Knob</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-map"></i> <span> Maps </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                	<li><a href="maps-google.html">Google Maps</a></li>
                                    <li><a href="maps-vector.html">Vector Maps</a></li>
                                    <li><a href="maps-mapael.html">Mapael Maps</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-google-pages"></i><span> Pages </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="page-starter.html">Starter Page</a></li>
                                    <li><a href="page-login.html">Login</a></li>
                                    <li><a href="page-register.html">Register</a></li>
                                    <li><a href="page-logout.html">Logout</a></li>
                                    <li><a href="page-recoverpw.html">Recover Password</a></li>
                                    <li><a href="page-lock-screen.html">Lock Screen</a></li>
                                    <li><a href="page-confirm-mail.html">Confirm Mail</a></li>
                                    <li><a href="page-404.html">Error 404</a></li>
                                    <li><a href="page-404-alt.html">Error 404-alt</a></li>
                                    <li><a href="page-500.html">Error 500</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-gift"></i><span> Extras </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="extras-profile.html">Profile</a></li>
                                    <li><a href="extras-sitemap.html">Sitemap</a></li>
                                    <li><a href="extras-about.html">About Us</a></li>
                                    <li><a href="extras-contact.html">Contact</a></li>
                                    <li><a href="extras-members.html">Members</a></li>
                                    <li><a href="extras-timeline.html">Timeline</a></li>
                                    <li><a href="extras-invoice.html">Invoice</a></li>
                                    <li><a href="extras-search-result.html">Search Result</a></li>
                                    <li><a href="extras-emailtemplate.html">Email Template</a></li>
                                    <li><a href="extras-maintenance.html">Maintenance</a></li>
                                    <li><a href="extras-coming-soon.html">Coming Soon</a></li>
                                    <li><a href="extras-faq.html">FAQ</a></li>
                                    <li><a href="extras-gallery.html">Gallery</a></li>
                                    <li><a href="extras-pricing.html">Pricing</a></li>
                                </ul>
                            </li>

                            <li class="menu-title">More</li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-comment-text-outline"></i><span> Blog </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="blogs-dashboard.html">Dashboard</a></li>
                                    <li><a href="blogs-blog-list.html">Blog List</a></li>
                                    <li><a href="blogs-blog-column.html">Blog Column</a></li>
                                    <li><a href="blogs-blog-post.html">Blog Post</a></li>
                                    <li><a href="blogs-blog-add.html">Add Blog</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-home-map-marker"></i><span> Real Estate </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="real-estate-dashboard.html">Dashboard</a></li>
                                    <li><a href="real-estate-list.html">Property List</a></li>
                                    <li><a href="real-estate-column.html">Property Column</a></li>
                                    <li><a href="real-estate-detail.html">Property Detail</a></li>
                                    <li><a href="real-estate-agents.html">Agents</a></li>
                                    <li><a href="real-estate-profile.html">Agent Details</a></li>
                                    <li><a href="real-estate-add.html">Add Property</a></li>
                                </ul>
                            </li>

                        </ul>
                    </div>
                    <!-- Sidebar -->
                    <div class="clearfix"></div>

                    <div class="help-box">
                        <h5 class="text-muted m-t-0">For Help ?</h5>
                        <p class=""><span class="text-custom">Email:</span> <br/> support@support.com</p>
                        <p class="m-b-0"><span class="text-custom">Call:</span> <br/> (+123) 123 456 789</p>
                    </div>

                </div>
                <!-- Sidebar -left -->

            </div>
            <!-- Left Sidebar End -->



            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container">


                        <div class="row">
							<div class="col-xs-12">
								<div class="page-title-box">
                                    <h4 class="page-title"> Images</h4>
                                    <ol class="breadcrumb p-0 m-0">
                                        <li>
                                            <a href="#">Zircos</a>
                                        </li>
                                        <li>
                                            <a href="#">User Interface </a>
                                        </li>
                                        <li class="active">
                                            Images
                                        </li>
                                    </ol>
                                    <div class="clearfix"></div>
                                </div>
							</div>
						</div>
                        <!-- end row -->



                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h4 class="m-t-0 header-title"><b>Images shapes</b></h4>
                                            <p class="text-muted m-b-30 font-13">
                                                Add classes to an <code>&lt;img&gt;</code> element to easily style
                                                images in any project.
                                            </p>

                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <img src="assets/images/small/img-1.jpg" alt="image"
                                                         class="img-responsive img-rounded" width="200"/>
                                                    <p class="m-t-15 m-b-0">
                                                        <code>.img-rounded</code>
                                                    </p>
                                                </div>

                                                <div class="col-sm-4">
                                                    <img src="assets/images/users/avatar-2.jpg" alt="image"
                                                         class="img-responsive img-circle" width="200"/>
                                                    <p class="m-t-15 m-b-0">
                                                        <code>.img-circle</code>
                                                    </p>
                                                </div>

                                                <div class="col-sm-4">
                                                    <img src="assets/images/small/img-3.jpg" alt="image"
                                                         class="img-responsive img-thumbnail" width="200"/>
                                                    <p class="m-t-15 m-b-0">
                                                        <code>.img-thumbnail</code>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-5 col-md-offset-1 m-t-sm-50">
                                            <h4 class="m-t-0 header-title"><b>Image sizes</b></h4>
                                            <p class="text-muted m-b-30 font-13">
                                                Add classes to an <code>&lt;img&gt;</code> element to easily style
                                                images in any project.
                                            </p>

                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <img src="assets/images/small/img-2.jpg" alt="image"
                                                         class="img-responsive thumb-lg"/>
                                                    <p class="m-t-15">
                                                        <code>.thumb-lg</code>
                                                    </p>
                                                </div>

                                                <div class="col-sm-4">
                                                    <img src="assets/images/small/img-5.jpg" alt="image"
                                                         class="img-responsive thumb-md"/>
                                                    <p class="m-t-15">
                                                        <code>.thumb-md</code>
                                                    </p>
                                                </div>

                                                <div class="col-sm-4">
                                                    <img src="assets/images/small/img-6.jpg" alt="image"
                                                         class="img-responsive thumb-sm"/>
                                                    <p class="m-t-15">
                                                        <code>.thumb-sm</code>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <h4 class="m-t-0 header-title"><b>Images Responsive</b></h4>
                                            <p class="text-muted m-b-30 font-13">
                                                Images in Bootstrap 3 can be made responsive-friendly via the addition
                                                of the <code>.img-responsive</code>
                                                class. This applies <code>max-width: 100%;</code>, <code>height:
                                                auto;</code> and <code>display: block;</code>
                                                to the image so that it scales nicely to the parent element.
                                            </p>

                                            <img src="assets/images/small/img-2.jpg" alt="image"
                                                         class="img-responsive"/>
                                        </div>

                                        <div class="col-lg-8 col-lg-offset-1 m-t-sm-50">
                                            <h4 class="m-t-0 header-title"><b>Thumbnail custom content</b></h4>
                                            <p class="text-muted m-b-30 font-13">
                                                By default, Bootstrap's thumbnails are designed to showcase linked
                                                images with minimal required markup.
                                            </p>

                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="thumbnail">
                                                        <img src="assets/images/small/img-3.jpg" class="img-responsive">
                                                        <div class="caption">
                                                            <h3>Thumbnail label</h3>
                                                            <p>
                                                                Cras justo odio, dapibus ac facilisis in, egestas eget
                                                                quam. Donec id elit non mi porta gravida at eget metus.
                                                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                                                            </p>
                                                            <p>
                                                                <a href="#"
                                                                   class="btn btn-primary waves-effect waves-light"
                                                                   role="button">Button</a>
                                                                <a href="#"
                                                                   class="btn btn-default waves-effect waves-light m-l-5"
                                                                   role="button">Button</a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="thumbnail">
                                                        <img src="assets/images/small/img-1.jpg" class="img-responsive">
                                                        <div class="caption">
                                                            <h3>Thumbnail label</h3>
                                                            <p>
                                                                Cras justo odio, dapibus ac facilisis in, egestas eget
                                                                quam. Donec id elit non mi porta gravida at eget metus.
                                                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                                                            </p>
                                                            <p>
                                                                <a href="#"
                                                                   class="btn btn-primary waves-effect waves-light"
                                                                   role="button">Button</a>
                                                                <a href="#"
                                                                   class="btn btn-default waves-effect waves-light m-l-5"
                                                                   role="button">Button</a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="thumbnail">
                                                        <img src="assets/images/small/img-6.jpg" class="img-responsive">
                                                        <div class="caption">
                                                            <h3>Thumbnail label</h3>
                                                            <p>
                                                                Cras justo odio, dapibus ac facilisis in, egestas eget
                                                                quam. Donec id elit non mi porta gravida at eget metus.
                                                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                                                            </p>
                                                            <p>
                                                                <a href="#"
                                                                   class="btn btn-primary waves-effect waves-light"
                                                                   role="button">Button</a>
                                                                <a href="#"
                                                                   class="btn btn-default waves-effect waves-light m-l-5"
                                                                   role="button">Button</a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end row -->


                        <!-- ===== MEDIA ==== -->

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">
                                    <h4 class="m-t-0 header-title"><b>Default media object</b></h4>
                                    <p class="text-muted m-b-30 font-13">The default media displays a media object
                                        (images, video, audio) to the left or right of a content block.</p>
                                    <div>
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                  src="assets/images/users/avatar-1.jpg"
                                                                  style="width: 64px; height: 64px;"> </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
                                                ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
                                                tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                                                fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                  src="assets/images/users/avatar-2.jpg"
                                                                  style="width: 64px; height: 64px;"> </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
                                                ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
                                                tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                                                fringilla. Donec lacinia congue felis in faucibus.
                                                <div class="media">
                                                    <div class="media-left">
                                                        <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                          src="assets/images/users/avatar-3.jpg"
                                                                          style="width: 64px; height: 64px;"> </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">Nested media heading</h4>
                                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                                        scelerisque ante sollicitudin commodo. Cras purus odio,
                                                        vestibulum in vulputate at, tempus viverra turpis. Fusce
                                                        condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                                                        congue felis in faucibus.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
                                                ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
                                                tempus viverra turpis.
                                            </div>
                                            <div class="media-right">
                                                <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                  src="assets/images/users/avatar-4.jpg"
                                                                  style="width: 64px; height: 64px;"> </a>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                  src="assets/images/users/avatar-5.jpg"
                                                                  style="width: 64px; height: 64px;"> </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
                                                ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
                                                tempus viverra turpis.
                                            </div>
                                            <div class="media-right">
                                                <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                  src="assets/images/users/avatar-7.jpg"
                                                                  style="width: 64px; height: 64px;"> </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end row -->

                        <!-- Media alignment -->

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">
                                    <h4 class="m-t-0 header-title"><b>Media alignment</b></h4>
                                    <p class="text-muted m-b-30 font-13">The images or other media can be aligned top,
                                        middle, or bottom. The default is top aligned.</p>

                                    <div>
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                  src="assets/images/users/avatar-8.jpg"
                                                                  style="width: 64px; height: 64px;"> </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Top aligned media</h4>
                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                                    scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
                                                    in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
                                                    nisi vulputate fringilla. Donec lacinia congue felis in
                                                    faucibus.</p>
                                                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
                                                    leo. Cum sociis natoque penatibus et magnis dis parturient montes,
                                                    nascetur ridiculus mus.</p>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-left media-middle">
                                                <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                  src="assets/images/users/avatar-9.jpg"
                                                                  style="width: 64px; height: 64px;"> </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Middle aligned media</h4>
                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                                    scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
                                                    in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
                                                    nisi vulputate fringilla. Donec lacinia congue felis in
                                                    faucibus.</p>
                                                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
                                                    leo. Cum sociis natoque penatibus et magnis dis parturient montes,
                                                    nascetur ridiculus mus.</p>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="media-left media-bottom">
                                                <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                  src="assets/images/users/avatar-10.jpg"
                                                                  style="width: 64px; height: 64px;"> </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Bottom aligned media</h4>
                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                                    scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
                                                    in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
                                                    nisi vulputate fringilla. Donec lacinia congue felis in
                                                    faucibus.</p>
                                                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
                                                    leo. Cum sociis natoque penatibus et magnis dis parturient montes,
                                                    nascetur ridiculus mus.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end row -->

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">
                                    <h4 class="m-t-0 header-title"><b>Media list</b></h4>
                                    <p class="text-muted m-b-30 font-13">With a bit of extra markup, you can use media
                                        inside list (useful for comment threads or articles lists).</p>

                                    <div>
                                        <ul class="media-list">
                                            <li class="media">
                                                <div class="media-left">
                                                    <a href="#"> <img class="media-object img-circle" alt="64x64"
                                                                      src="assets/images/users/avatar-1.jpg"
                                                                      style="width: 64px; height: 64px;"> </a>
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading">Media heading</h4>
                                                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                                        scelerisque ante sollicitudin commodo. Cras purus odio,
                                                        vestibulum in vulputate at, tempus viverra turpis.</p>
                                                    <!-- Nested media object -->
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <a href="#"> <img class="media-object img-circle"
                                                                              alt="64x64"
                                                                              src="assets/images/users/avatar-2.jpg"
                                                                              style="width: 64px; height: 64px;"> </a>
                                                        </div>
                                                        <div class="media-body">
                                                            <h4 class="media-heading">Nested media heading</h4>
                                                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                                            scelerisque ante sollicitudin commodo. Cras purus odio,
                                                            vestibulum in vulputate at, tempus viverra turpis.
                                                            <!-- Nested media object -->
                                                            <div class="media">
                                                                <div class="media-left">
                                                                    <a href="#"> <img class="media-object img-circle"
                                                                                      alt="64x64"
                                                                                      src="assets/images/users/avatar-3.jpg"
                                                                                      style="width: 64px; height: 64px;">
                                                                    </a>
                                                                </div>
                                                                <div class="media-body">
                                                                    <h4 class="media-heading">Nested media heading</h4>
                                                                    Cras sit amet nibh libero, in gravida nulla. Nulla
                                                                    vel metus scelerisque ante sollicitudin commodo.
                                                                    Cras purus odio, vestibulum in vulputate at, tempus
                                                                    viverra turpis.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Nested media object -->
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <a href="#"> <img class="media-object img-circle"
                                                                              alt="64x64"
                                                                              src="assets/images/users/avatar-4.jpg"
                                                                              style="width: 64px; height: 64px;"> </a>
                                                        </div>
                                                        <div class="media-body">
                                                            <h4 class="media-heading">Nested media heading</h4>
                                                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                                            scelerisque ante sollicitudin commodo. Cras purus odio,
                                                            vestibulum in vulputate at, tempus viverra turpis.
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div> <!-- container -->

                </div> <!-- content -->

                <footer class="footer text-right">
                    2016 - 2017 © Zircos.
                </footer>

            </div>


            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->


            <!-- Right Sidebar -->
            <div class="side-bar right-bar">
                <a href="javascript:void(0);" class="right-bar-toggle">
                    <i class="mdi mdi-close-circle-outline"></i>
                </a>
                <h4 class="">Settings</h4>
                <div class="setting-list nicescroll">
                    <div class="row m-t-20">
                        <div class="col-xs-8">
                            <h5 class="m-0">Notifications</h5>
                            <p class="text-muted m-b-0"><small>Do you need them?</small></p>
                        </div>
                        <div class="col-xs-4 text-right">
                            <input type="checkbox" checked data-plugin="switchery" data-color="#7fc1fc" data-size="small"/>
                        </div>
                    </div>

                    <div class="row m-t-20">
                        <div class="col-xs-8">
                            <h5 class="m-0">API Access</h5>
                            <p class="m-b-0 text-muted"><small>Enable/Disable access</small></p>
                        </div>
                        <div class="col-xs-4 text-right">
                            <input type="checkbox" checked data-plugin="switchery" data-color="#7fc1fc" data-size="small"/>
                        </div>
                    </div>

                    <div class="row m-t-20">
                        <div class="col-xs-8">
                            <h5 class="m-0">Auto Updates</h5>
                            <p class="m-b-0 text-muted"><small>Keep up to date</small></p>
                        </div>
                        <div class="col-xs-4 text-right">
                            <input type="checkbox" checked data-plugin="switchery" data-color="#7fc1fc" data-size="small"/>
                        </div>
                    </div>

                    <div class="row m-t-20">
                        <div class="col-xs-8">
                            <h5 class="m-0">Online Status</h5>
                            <p class="m-b-0 text-muted"><small>Show your status to all</small></p>
                        </div>
                        <div class="col-xs-4 text-right">
                            <input type="checkbox" checked data-plugin="switchery" data-color="#7fc1fc" data-size="small"/>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Right-bar -->

        </div>
        <!-- END wrapper -->



        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="http://coderthemes.com/zircos_2/plugins/switchery/switchery.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>

<!-- Mirrored from coderthemes.com/zircos_2/default/ui-images.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Sep 2017 08:58:50 GMT -->
</html>